<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	<script type="text/javascript" src="resources/js/jquery-1.8.3.min.js"></script>
</head>
<body>

<center>
	<h1>注册页面</h1>
<hr>
	<form class="form-horizontal">
  <div class="form-group">
    <label for="phone" class="col-sm-4 control-label">手机号码:</label>
    <div class="col-sm-4">
     	 <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入手机号……">
     	 <span id="p1" style="color:red"></span>
    </div>
  </div>
  
  <div class="form-group">
    <label for="password" class="col-sm-4 control-label">设置密码:</label>
    <div class="col-sm-4">
      <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码……">
      <span id="p2" style="color:red"></span>
    </div>
  </div>
  
  <div class="form-group">
    <label for="birthday" class="col-sm-4 control-label">出生日期:</label>
    <div class="col-sm-4">
     	 <input type="date" class="form-control" id="birthday"  name="birthday" >
     	 <span id="p3" style="color:red"></span>
    </div>
  </div>
  
  <div class="form-group">
    <label for="fetch" class="col-sm-4 control-label">获取验证码:</label>
    <div class="col-sm-8">
    	<div class="col-sm-2">
    		<input type="button" class="btn btn-success" id="fetch" name="fetch" onclick="verification()" value="点击获取手机号验证码">
    	</div>
    	<div class="col-sm-2">
    		<input type="text" class="form-control" id="code" name="code" placeholder="获取到的验证码">
    	</div>
    </div>
  </div>
  
  <div class="form-group">
    <label for="verify" class="col-sm-4 control-label">验证码:</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" id="verify"  name="verify" placeholder="请输入获取到的验证码……">
      <span id="p4" style="color:red"></span>
    </div>
  </div>
  
  
  <div class="form-group">
    <div class="col-sm-offset-1 col-sm-10">
      		<button type="button" class="btn btn-warning"  style="width: 500px;height: 50px"  onclick="zhuche()">点击修改</button>
    </div>
     
  </div>
  
 
 
</form>
</center>
<script type="text/javascript">
	function zhuche() {
		if($('[name="phone"]').val()==null ||$('[name="phone"]').val()==''){
			$("#p1").html("手机号不能为空")
			return;
		}else{
			$("#p1").html("")
		}

		if($('[name="password"]').val()==null ||$('[name="password"]').val()==''){
			$("#p2").html("密码不能为空")
			return;
		}else{
			$("#p2").html("")
		}
		if($('[name="birthday"]').val()==null){
			$("#p3").html("出生日期不能为空")
			return;
		}else{
			$("#p3").html("")
		}
		if($('[name="verify"]').val()!=$('[name="code"]').val()){
			$("#p4").html("验证码输入错误")
			return;
		}else{
			$("#p4").html("")
		}
		
		$.post("zhuche",$("form").serialize(),function(flag){
			alert(flag)
			if(flag){
				alert("注册成功")
				location="toLogin";
			}else{
				alert("注册失败")
			}
		},"json")
		
	}
	
	
	function verification() {
		if($('[name="phone"]').val()==null ||$('[name="phone"]').val()==''){
			$("#p1").html("手机号不能为空")
			return;
		}else{
			$("#p1").html("")
		}
		var phone=$('[name="phone"]').val()
		$.post("verification",{phone:phone},function(resu){
			if(resu!=null&&resu!=''){
				alert(resu)
				$('[name="code"]').val(resu)
			}else {
				$("#p1").html("请输入正确的手机号")
			}
		})
	}
	
</script>
</body>
</html>